// mixin & function
@import "var";
// 转rem
@function px( $px ){
  @return $px/100 + rem;
}
// 多值转rem
@mixin calc($property, $values...) {
  $max: length($values);
  $remValues: '';
  @for $i from 1 through $max {
    $value: nth($values, $i);
    $remValues: #{$remValues + $value/100}rem;

    @if $i < $max {
      $remValues: #{$remValues + " "};
    }
  }
  #{$property}: $remValues;
}
// 多行省略号
@mixin line-clamp($num: 2){
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $num;
  -webkit-box-orient: vertical;
}
// 单行省略号
@mixin ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
// 小icon点击区域
@mixin clickarea {
  &:after {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
  }
}
// 滚动
@mixin scrolling {
  overflow: auto;
  overflow-scrolling: touch;
  -webkit-overflow-scrolling: touch;
}
// 三角形
@mixin arrow($arrow: down,$size: px(3),$color: $clr-g9) {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  @if $arrow == up {
    border-bottom: $size solid $color;
    border-right: $size solid transparent;
    border-left: $size solid transparent;
  } @else if $arrow == down{
    border-top: $size solid $color;
    border-right: $size solid transparent;
    border-left: $size solid transparent;
  } @else if $arrow == left {
    border-right: $size solid $color;
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
  } @else if $arrow == right {
    border-left: $size solid $color;
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
  }
}
// 边框
@mixin border($type: all) {
  content: '';
  position: absolute;
  @if $type == all {
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    transform: scale(.5);
    transform-origin: top left;
  } @else if $type == top {
    top: 0;
    left: 0;
    right: 0;
    border-top: 1px solid $clr-ge;
    transform: scaleY(.5);
  }
  @else if $type == bottom {
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid $clr-ge;
    transform: scaleY(.5);
  }
  @else if $type == left {
    left: 0;
    top: 0;
    bottom: 0;
    border-left: 1px solid $clr-ge;
    transform: scaleX(.5);
  }
  @else if $type == right {
    right: 0;
    top: 0;
    bottom: 0;
    border-right: 1px solid $clr-ge;
    transform: scaleX(.5);
  }
}